import React, { useState, useEffect, useCallback } from "react";
import comm from '../utils/comm.js'
import toast from '../utils/toast.js'
import ExchangeRate from '../modal/exchangeRate.js'
import ActionForm from '../modal/actionForm.js'

// 汇率类
let exchangeRate = null;

let actionForm = new ActionForm();

// 任务输入组件
function TaskInput(props) {
    const [task, setTask] = useState(''); {/* 任务 */ }
    const valueChange = useCallback(
        (val) => {
            setTask(val);
        }, [])
    return (<div>
        <input className='com-input' value={task} type="text" placeholder='任务' onChange={(e) => { actionForm.taskChange(e, valueChange) }} />
    </div>)
}

// 价格输入组件
function PriceInput(props) {
    const [price, setPrice] = useState(''); {/* 价格 */ }
    const valueChange = useCallback(
        (val) => {
            setPrice(val);
        }, [])
    return (<input className='com-input price-input' value={price} type="text" placeholder='价格' onChange={(e) => { actionForm.priceChange(e, valueChange, exchangeRate) }} />)
}

// 货币类型选择组件
function MoneyTypeSelect(props) {
    const [moneyType, setMoneyType] = useState(''); {/* 货币类型 */ }
    const valueChange = useCallback(
        (val) => {
            setMoneyType(val);
        }, [])
    return (
        <div className='com-select' >
            <select value={moneyType} className={moneyType === '' ? 'default-option' : ''} onChange={(e) => { actionForm.moneyTypeChange(e, valueChange, exchangeRate) }}>
                <option disabled value="">货币类型</option>
                <option value="CNY">人民币</option>
                <option value="RUB">卢布</option>
                <option value="USD">美元</option>
            </select>
        </div>
    )
}



//价格面板
function CurrencyPanel(props) {
    const [CNY, setCNY] = useState(0);
    const [RUB, setRUB] = useState(0);
    const [USD, setUSD] = useState(0);
    function rateChange(e) {
        setCNY(e.CNY);
        setRUB(e.RUB);
        setUSD(e.USD);
    }
    useEffect(() => {
        exchangeRate = new ExchangeRate(props.exchangeRate);
        exchangeRate.subscriptionExchangeRate(rateChange);
    }, [props.exchangeRate])

    return (<div>
        <div className='flex justify-between'>
            <div>
                <span>当前汇率：</span>
            </div>
            <div className='rate-box'>
                <span>{props.exchangeRate.RUB ? comm.numFormat(1 / props.exchangeRate.RUB.value) : 0} ₽/¥</span>
                <span>{props.exchangeRate.USD ? comm.numFormat((1 / (props.exchangeRate.RUB.value / props.exchangeRate.USD.value))) : 0} ₽/$</span>
                <span>{props.exchangeRate.USD ? comm.numFormat(props.exchangeRate.USD.value) : 0} ¥/$</span>
            </div>
        </div>
        <div className='flex justify-between padding-xs-tb'>
            <div>
                <span>任务价格：</span>
            </div>
            <div className='rate-box'>
                <span>{comm.numFormat(CNY)}&nbsp;¥</span>
                <span>{comm.numFormat(RUB)}&nbsp;₽</span>
                <span>{comm.numFormat(USD)}&nbsp;$</span>
            </div>
        </div>
    </div>)
}

//头部面板组件
export default React.memo(({ exchangeRate, addTaskList, blockChain}) => {
    function btnClike (){
        const data = actionForm.addTask();
        //将参数传递给父组件 设置state
        if (data) addTaskList(data);
    }
    function showBlockChain(){
        toast.succeed('F12打开控制台看看吧！', 2000);
        console.log('BLOCKCHAIN:', blockChain)
    }

    return (
        <div>
            <div className='orer-box flex align-center'>
                <TaskInput></TaskInput>
                <PriceInput></PriceInput>
                <MoneyTypeSelect></MoneyTypeSelect>
                <button className='com-btn' onClick={btnClike}>添加</button>
                <button className='com-btn' onClick={showBlockChain}>显示区块链</button>
            </div>
            <div>
                <CurrencyPanel exchangeRate={exchangeRate} />
            </div>
        </div>)
})